<template>
  <div class="nav-tabbar-wrapper">
    <ul class="nav-tabs">
      <!-- {{ navItems }} -->
      <li v-for="item in navItems" class="nav-tab" @click="openPage(item.path)">
        <img :src="item.icon" class="nav-tab-icon" />
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { RouterLink } from 'vue-router'

export default defineComponent({
  props: {
    navItems: {
      type: Array as PropType<NavItem[]>
    },
  },
  components: {
    RouterLink
  },
  setup(props) {
    // props.navItems[0].icon
  },
  methods: {
    openPage(path: string) {
      if (!path) {
        return;
      }
      this.$router.push(path);
    }
  }
})
</script>


<style lang="stylus" scoped>
@import '../../styles/mixin.styl'

.nav-tabbar-wrapper
  position fixed 
  bottom 0
  left 0
  right 0
  width 100%
  padding .44rem .52rem
  background transparent
  // background-image linear-gradient(0, #fff, rgba(255,255,255,0.7), rgba(255,255,255,0));
  .nav-tabs
    Flex(row, space-between, center)
    padding 0 .76rem
    width 100%
    height 1.28rem
    border-radius .4rem
    background #fff
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    font-size 0
    line-height 1
    .nav-tab
      padding .2rem
    .nav-tab-icon
      width .52rem
      height .52rem
</style>